import React, { Fragment, useState } from 'react';
import { observer, inject } from "mobx-react";
import {Modal,Form,Input} from 'antd';
import categoryStore from "../store/CategoryStore";
import IconCommon from "../../common/IconCommon";
import {FolderOpenOutlined} from "@ant-design/icons";
/**
 * 目录的编辑与添加弹窗
 */
const CategoryEdit =(props)=>{
    const {type } = props;
    const {findCategory, createCategory, updateCategory, categoryId,findNodeTree} = categoryStore;

    const [visible, setVisible] = useState(false);

    const [form] = Form.useForm();
    const [categoryInfo, setCategoryInfo] = useState();

    const workspaceId = localStorage.getItem('workspaceId');

    /**
     * 弹框展示
     */
    const showModal = async () => {
        if(type === "edit"){
            let res = await findCategory(props.categoryId?props.categoryId:categoryId)
            form.setFieldsValue({
                name: res.node.name,
            })
            setCategoryInfo(res)
        }

        setVisible(true);
    };


    /**
     * 收起弹框
     */
    const hideModal = () => {setVisible(false)};

    /**
     *  弹框提交
     */
    const onFinish = async () => {
        let values = await form.validateFields();

        if(type === 'edit'){
            let param= {
                id:categoryInfo.id,
                node:{
                    ...categoryInfo.node,
                    ...values
                }
            }
            await updateCategory(param);
        }else{
            values.node = {
                name:values.name,
                workspace: {id:workspaceId},
                parentId:values.parent?values.parent:props.categoryId,
            }

            await createCategory(values);
        }

        await findNodeTree({workspaceId:workspaceId})

        setVisible(false)
    };

    return(
        <Fragment>
            <a onClick={showModal} className={"display-flex-gap-5"}>
                {
                    type==="edit"
                        ?<IconCommon
                            icon={"bianji11"}
                            className={"icon-s"}
                            onClick={showModal}
                        />
                        : <FolderOpenOutlined />
                }

                {props.name}
            </a>
            <Modal
                title={type==="edit"?"编辑":"添加目录"}
                open={visible}
                onCancel={hideModal}
                destroyOnClose={true}
                onOk={onFinish}
                okText="提交"
                cancelText="取消"
                width={500}
                centered
            >
                <div style={{padding:"0 0 10px 0"}}>
                    <Form
                        form={form}
                        preserve={false}
                        layout={"vertical"}
                    >
                        <Form.Item
                            label="名称"
                            name="name"
                            rules={[{ required: true, message: '添加目录名称!' }]}
                        >
                            <Input  placeholder="请输入目录名称"/>
                        </Form.Item>
                    </Form>
                </div>

            </Modal>
        </Fragment>
    )

}

export default observer(CategoryEdit);
